import React, { Fragment } from 'react';
import qs from 'query-string';
import { history } from 'umi';
import { storage } from './utils';
import styles from './result.less';
import { changeTitle } from '../../../utils/utils';

const icon_success = require('./imgs/icon_success.png');
const icon_fail = require('./imgs/icon_fail.png');

function Result() {
  changeTitle('支付结果');
  const { status, totalFee, amount, posSeqNo, msg, mecDisNm } =
    qs.parse(location.search) || {};
  const isSuccess = ['s'].includes(status);
  const isCancelled = ['c'].includes(status);
  const adInfoList = storage.getItem('adInfoList');
  const ad = (adInfoList && adInfoList[0]) || {};
  const imgSrc = isSuccess ? icon_success : icon_fail;
  const money = totalFee || amount;
  const title = isCancelled
    ? decodeURIComponent(msg)
    : isSuccess
    ? '支付成功'
    : '支付失败';

  if (ad.jumpLink) return location.replace(ad.jumpLink);

  return (
    <div className={styles.payResult}>
      <div className="space" />

      <div className={styles.header}>
        <img className={styles.img} src={imgSrc} alt="" />

        <div className={styles.title}>{title}</div>
      </div>

      {isSuccess && (
        <Fragment>
          <div className="space" />

          <div className={styles.content}>
            <div className={styles.title}>付款详情</div>

            <div className={styles.amount}>￥ {money}</div>

            <div className={styles.detail}>
              <div className={styles.line}>
                <div className={styles.lineLabel}>订单信息</div>
                <div className={styles.lineContent}>
                  {decodeURIComponent(mecDisNm)}-收款
                </div>
              </div>
              <div className={styles.line}>
                <div className={styles.lineLabel}>付款方式</div>
                <div className={styles.lineContent}>
                  招商银行信用卡[{posSeqNo}]
                </div>
              </div>
              <div className={styles.line}>
                <div className={styles.lineLabel}>交易单号</div>
                <div className={styles.lineContent}>98890909090909080</div>
              </div>
            </div>
          </div>

          <div className="space" />
        </Fragment>
      )}

      <div className={styles.footer}>
        <button onClick={() => history.go(-1)}>返回</button>

        {isSuccess && <div className={styles.subscribe}>关注店喵喵</div>}
      </div>
    </div>
  );
}

export default Result;
